<template>
	<view class="e-tabbar-item" :style="[addStyle(props.customStyle)]" @tap="clickHandler">
		<view class="e-tabbar-item__icon">
			<template v-if="$slots.default">
				<slot  />
			</template>
			<template v-else>
				<e-icon v-if="props.icon" :name="props.icon"
					:color="isActive? tabbarContext.props.activeColor : tabbarContext.props.inactiveColor" :size="20">
				</e-icon>
				<template v-else>
					<slot v-if="isActive" name="active-icon" />
					<slot v-else name="inactive-icon" />
				</template>
				<e-badge absolute :offset="[0, props.dot ? '34rpx' : Number(props.badge) > 9 ? '14rpx' : '20rpx']"
					:customStyle="props.badgeStyle" :isDot="props.dot" :value="props.badge || (props.dot ? 1 : null)"
					:show="props.dot || Number(props.badge) > 0"></e-badge>
			</template>
			
		</view>

		<slot name="text">
			<text class="e-tabbar-item__text" :style="{
					color: isActive? tabbarContext.props.activeColor : tabbarContext.props.inactiveColor
				}">{{ props.text }}</text>
		</slot>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * TabbarItem 底部导航栏子组件
	 * @description 此组件提供了自定义tabbar的能力。
	 * @tutorial https://www.uviewui.com/components/tabbar.html
	 * @property {String | Number}	name		item标签的名称，作为与e-tabbar的value参数匹配的标识符
	 * @property {String}			icon		uView内置图标或者绝对路径的图片
	 * @property {String | Number}	badge		右上角的角标提示信息
	 * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
	 * @property {String}			text		描述文本
	 * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
	 * @property {Object}			customStyle	定义需要用到的外部样式
	 * 
	 * @example <e-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"	><e-tabbar-item text="首页" icon="home" dot ></e-tabbar-item></e-tabbar>
	 */
	export default defineComponent({
		name: "e-tabbar-item",
		mixins: [mpMixin]
	});
</script>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		toRefs,
		inject,
		nextTick,
		onUnmounted
	} from 'vue'
	import {
		tabbarItemProps,
		tabbarItemEmits
	} from './props';
	import {
		addStyle,
		throwError
	} from '../../libs/utils/_utils'
	import {
		nanoid,
	} from '../../libs/utils'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	import {
		tabbarContextKey,
		type TabbarItemContext
	} from '../../libs/tokens'

	const {
		tabbarItem: tabbarItemDefaultProps
	} = toRefs(componentsProps);

	const tabbarContext = inject(tabbarContextKey)
	if (!tabbarContext) throwError('ETabbarItem', 'e-tabbar-item需要结合e-tabbar组件使用')

	const _props = defineProps(tabbarItemProps)
	const emit = defineEmits(tabbarItemEmits)

	const props = useDefaultProps < DefaultProps['tabbarItem'] > (_props, tabbarItemDefaultProps);

	const isActive = ref(false)

	// 此方法将会被父组件e-tabbar调用
	const updateFromParent = () => {
		// 重新初始化
		init()
	}

	const context: TabbarItemContext = reactive({
		id: nanoid(),
		updateFromParent
	})



	const init = () => {
		// 获取子组件在tabbar的children数组中的索引
		const index = tabbarContext.getChildIndex(context.id)
		// 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
		isActive.value = (props.value.name || index) === tabbarContext.props.value
	}


	const clickHandler = () => {
		nextTick(() => {
			const index = tabbarContext.getChildIndex(context.id)
			const name = props.value.name || index
			// 点击的item为非激活的item才发出change事件
			if (name !== tabbarContext.props.value) {
				tabbarContext.change(name)
			}
			emit('click', name)
		})
	}

	if (tabbarContext) {
		tabbarContext.addField(context)

	}
	onUnmounted(() => {
		tabbarContext.removeField(context)
	})


	init()
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/tabbar-item.scss";
</style>
